<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/universe.css">
    <link rel="stylesheet" href="./fonts/font_901371_pzqo1ww1sw/iconfont.css">
    <title>Document</title>
</head>
<body>
    <!-- 头部 -->
    <div class="t-header">
        <div class="iconfont icon-left"></div>
        <div>凑单品</div>
        <div>
            <img src="./images/header_app.png" alt="">
        </div>
    </div>
    <!-- 下拉框 -->
    <div class="t_drop_list">
        <ul class="option">
            <li class="option_store">
                <p></p>
                <span></span> 
            </li>
            <li class="option_region">
                <p></p>
                <span></span>
            </li>
            <li>
                <p>全部价格</p>
                <span></span>
            </li>
        </ul>
        <div class="drop_search iconfont icon-sousuo"></div>
        <ul class="t_drop_store">
                <li>京东</li>
                <li>天猫</li>
                <li>淘宝</li>
        </ul>
        <!-- <select name="" class="t_drop_store">
            <option value=""></option>
        </select> -->
        <ul class="t_drop_region">
                <li>华南</li>
                <li>华西</li>
                <li>华东</li>
        </ul>
        <!-- <select name="" class="t_drop_store">
                <option value=""></option>
            </select> -->
    </div>
    <!-- 商品列表 -->
    <div class="t_goods_list">
        <ul class=" good_list_ul clearfix">
           
        </ul>
    </div>

    <!-- 底部 -->
    <footer>
            <!-- 底部工具栏 -->
            <div class="footer-tools">
              <a href="javascript:;">登录</a>
              <a href="javascript:;">注册</a>
              <a href="javascript:;">返回顶部</a>
            </div>
            <!-- 版权信息 -->
            <div class="footer-copyright">
              <p>
                <a href="javascript:;">手机APP下载</a>
                慢慢买手机版 
                <span>-- 掌上比价平台</span>
              </p>
              <p>m.manmanbuy.com</p>
            </div>
    </footer>
</body>
</html>
<!-- <script src="./lib/zepto/zepto.js"></script> -->
<script src="./lib/template/template.js"></script>
<!-- <script src="./js/media.js"></script> -->
<script src="./lib/jquery/jquery.js"></script>
<script src="./lib/nprogress/nprogress.js"></script>

<!-- 商品列表数据渲染 -->
<script type="text/template" id="goodstemp">
    {{each result as val key}}
        <li>
            <a href="javascript:;">
                <img src="{{val.productImg}}" alt="">
                <p>{{val.productName}}</p>
            </a>
            <div class="clearfix">
                <span>{{val.productPrice}}</span>
                <span><a href="javascript:;">去凑单</a></span>
            </div>

        </li>
    {{/each}}
</script>

<!-- 店铺名数据渲染 -->
<script type="text/template" id='dropStore'>
    {{each result as val key}}
            <li data-id="{{val.shopId}}">{{val.shopName}}</li>
    {{/each}}
</script>

<!-- 区域名数据渲染 -->
<script type="text/template" id='dropRegion'>
    {{each result as val key}}
            <li data-id="{{val.areaId}}">{{val.areaName}}</li>
    {{/each}}
</script>


<script>
   //  店铺数据请求
   var shopid=0 ;
   var areaid=0 ;
        store();
        region ();
       function store(){
        $.ajax({
            type:'get',
            url:'http://193.112.55.79:9090/api/getgsshop',
            dataType: "jsonp",
            success:function(res){
                template.config("escape", false); 
                var htmlstr=template('dropStore',res);
                $('.t_drop_store').html(htmlstr);

                //设置进入页面默认的店铺名
                var jd=$('.t_drop_store li');
               var jdstr= jd.html();
                $('.option_store p').text(jdstr);
            //    jdId=jd.attr('data-id');
                $('.option_store p').attr('data-id',shopid);
                // shopid=$('.option_store p').attr('data-id');
                //     console.log(shopid);
                    //点击更换店铺名
            
                $('.t_drop_store li').on('click',function(){
                var text=$(this).text();
                // console.log(text);
                $('.option_store p').text(text);
                shopid=$(this).attr('data-id');
                // console.log(id);
                $('.option_store p').attr('data-id',shopid);

                })
               
                
            }

        })
       }
        //区域名数据请求
        function region (){
            $.ajax({
                type:'get',
                url:'http://193.112.55.79:9090/api/getgsshoparea',
                dataType: "jsonp",
                success:function(res){
                    template.config("escape", false); 
                    var htmlstr=template('dropRegion',res);
                    $('.t_drop_region').html(htmlstr);

                    //设置进入页面默认的区域名
                    var quyu=$('.t_drop_region li');
                    var quyustr= quyu.html();
                     $('.option_region p').text(quyustr);
                     quyuId=quyu.attr('data-id');
                     $('.option_region p').attr('data-id',areaid);
                    //  areaid=$('.option_region p').attr('data-id');
                    //     console.log(areaid);

                    //点击更换区域名
                    $('.t_drop_region li').on('click',function(){
                        var text=$(this).text();
                        // console.log(text);
                        $('.option_region p').text(text);
                        areaid=$(this).attr('data-id');
                        $('.option_region p').attr('data-id',areaid);

                    })
                
                
                }

            })
        }    
    render();

    function render(){
        $.ajax({
            type:'get',
            url:'http://193.112.55.79:9090/api/getgsproduct',
            
            data:{
                shopid :shopid,
                // console.log($('.option_region p').attr('data-id'))
                areaid:areaid
            },
            dataType:'json',
            success:function(res){
                // console.log(res);
                var htmlstr=template('goodstemp',res)
                $('.good_list_ul').html(htmlstr);
            }

         })
    }



    // 注册点击事件 点击出现下拉栏
    $('.option_store').on('click',function(){
        $('.t_drop_store').slideToggle();
    })

    $('.option_region').on('click',function(){
        $('.t_drop_region').slideToggle();
    })

    //点击按钮重新获取id渲染页面
    $('.drop_search').on('click',function(){
        render();
        // console.log(shopid);
        // console.log(areaid);
    })

        
</script>